<template>
  <div>
    <el-form
      ref="form"
      :inline="true"
      :model="form"
    >
      <el-form-item
        v-for="(item,index) in formList"
        :key="index"
      >
        <el-input
          v-if="item.type === 'input'"
          v-model="form[`${item.key}`]"
          :placeholder="item.name"
          clearable
          @clear="commonClearKey(item.key)"
        />
        <el-select
          v-if="item.type === 'select'"
          v-model="form[`${item.key}`]"
          :placeholder="item.name"
          clearable
          @clear="commonClearKey(item.key)"
        >
          <el-option
            v-for="jtem in item.option"
            :key="jtem.value"
            :label="jtem.label"
            :value="jtem.value"
          />
        </el-select>
        <!-- <el-select
          v-if="item.type === 'dic-select'"
          v-model="form[`${item.key}`]"
          :placeholder="item.name"
          clearable
          @clear="commonClearKey(item.key)"
        >
          <el-option
            v-for="item in dicJson[`${item.dicKey}`]"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          />
        </el-select>
        <el-select
          v-if="item.type === 'remote-select'"
          v-model="form[`${item.key}`]"
          :placeholder="item.name"
          :remote-method="(query)=>{getRemoteList(query,item)}"
          :loading="remoteSelectLoading"
          clearable
          filterable
          remote
          @clear="remoteSelectClear(item)"
        >
          <el-option
            v-for="option in item.remoteOption"
            :key="option.value"
            :label="option.name"
            :value="option.id"
          />

        </el-select>
        <org-input
          v-if="item.type === 'org-select'"
          ref="orgInput"
          @orgSelected="orgSelected($event,item.key)"
        /> -->
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="handleClick"
        >查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="reset"
        >重置</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>
<script>
// import Services from '@/api/common-search-api'
// import commonOrgSelectDialog from '@/components/commonOrgSelect'
// import commonOrgInput from '@/components/commonOrgInput'
export default {
  components: {
    // 'org-input': commonOrgInput
  },
  props: {
    formList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      form: {}
      // dicJson: {},
      // remoteSelectLoading: false,
      // remoteOption: [] // remote-select的选项
    }
  },
  mounted() {
    // this.dicJson = require('@/static/static-dic.json')
  },
  methods: {
    handleClick() {
      this.$emit('searchClick', this.form)
    },

    // getRemoteList(query, item) {
    //   const service = new Services(item.urlType)
    //   this.remoteSelectLoading = true
    //   service
    //     .getList({
    //       type: item.paramType,
    //       words: query
    //     })
    //     .then(it => {
    //       this.remoteSelectLoading = false
    //       if (it.code === 0) {
    //         item.remoteOption = it.data
    //       } else {
    //         this.$message.error(it.message)
    //       }
    //     })
    // },
    // remoteSelectClear(item) {
    //   item.remoteOption = []
    //   this.commonClearKey(item.key)
    // },
    // orgSelected(e, key) {
    //   console.log(key)
    //   this.$set(this.form, `${key}`, e.orgCode)
    //   console.log(this.form)
    // },
    reset() {
      this.form = {}
      // if (this.$refs.orgInput) {
      //   this.$refs.orgInput.forEach(item => {
      //     item.reset()
      //   })
      // }
    },
    commonClearKey(key) {
      this.form = this._.omit(this.form, [`${key}`])
    }
  }
}
</script>
<style scoped>

</style>
